<template>
  <section class="component contract-formation">
    <el-form :model="fromData" :rules="rules" ref="contract-formation-form" label-width="110px" class="demo-ruleForm">
      <el-row>
        <el-col :span="12">
          <el-form-item label="合同名称：" prop="templateId">
            <el-select placeholder="请选择" v-model="fromData.templateId">
              <el-option v-for="item in templateSet" :key="item.id" :label="item.templateName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-button @click="onClickContract">生成</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="生成记录：">
        </el-form-item>
        <data-box :data="dataSet" class="box-table">
          <template slot="columns">
            <el-table-column prop="operatorRealName" label="操作人" :min-width="$helper.getColumnWidth(4)"></el-table-column>
            <el-table-column prop="createTime" label="操作时间" :min-width="$helper.getColumnWidth(4)" :formatter="(row) => $filter.dateTimeFormat(row.createTime)"></el-table-column>
            <el-table-column prop="contractName" label="合同名称" :min-width="$helper.getColumnWidth(4)"></el-table-column>
            <el-table-column label="操作" :min-width="$helper.getColumnWidth(4)">
              <template slot-scope="scope">
                <el-button type="text" @click="onClickPreview(scope.row)">预览</el-button>
                <el-button type="text" @click="onClickDownload(scope.row)">下载</el-button>
              </template>
            </el-table-column>
          </template>
        </data-box>
      </el-row>
    </el-form>

    <div class="operate-buttons">
      <!-- <el-button @click="EmitClose">取消</el-button> -->
      <el-button @click="commit">确定</el-button>
    </div>
    <!-- 预览弹窗 -->
    <el-dialog :visible.sync="dialog.preview" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body  width="900px">
      <div class="print-preview" style="text-align:left">
        <div v-html="conTractContent"></div>
      </div>
    </el-dialog>
  </section>
</template>
<script lang="ts">
import Vue from 'vue'
import { namespace } from "vuex-class";
import Component from 'vue-class-component'
import { Emit, Prop } from "vue-property-decorator";
import DataBox from '~/components/common/data-box.vue'
import { Dependencies } from '~/core/decorator';
import { TemplateService } from '~/services/domain-service/template.service';
const CollectionExecutionModule = namespace("collection-execution");
import { MENU_CHANNEL } from '~/config/enum.config'


@Component({
  components: {
    DataBox
  }
})

export default class ContractFormation extends Vue {
  @CollectionExecutionModule.State private menuChannel
  @Dependencies(TemplateService)
  private templateService: TemplateService
  /**
   * 案件ID
   */
  @Prop({ type: Array, required: true })
  private caseIds;
  private conTractContent: any = ''
  private fromData: any = {
    templateId: "",
    caseId: this.caseIds[0]
  }
  private dialog: any = {
    preview: false,
  }
  private rules: any = {
    templateId: [{ required: true, message: "请选择合同名称", trigger: "blur" }]
  }
  private dataSet: any = []
  private templateSet: any[] = []
  @Emit('close') private EmitClose() { }

  private getTemplateByDistributeType() {
    let distributeType="";
    switch (this.menuChannel) {
      case MENU_CHANNEL.Tel_personal:
      case MENU_CHANNEL.Tel_team:
          distributeType="TEL";
        break;
      case MENU_CHANNEL.Visit_personal:
        case MENU_CHANNEL.Visit_team:
          distributeType="VISIT";
        break;
      case MENU_CHANNEL.Legal_personal:
        case MENU_CHANNEL.Legal_team:
          distributeType="LEGAL";
        break;
      default:
        break;
    }
    if(distributeType){
      this.templateService.getTemplateByDistributeType({distributeType}).subscribe(
          data => this.templateSet=data
        )
    }
    this.refreshData();
  }
  private commit() {
    this.EmitClose();
  }
  private onClickContract() {
    const form: any = this.$refs["contract-formation-form"];
    form.validate(valid => {
      if (!valid) return false;
      this.templateService
        .createContractInfo(this.fromData)
        .subscribe(data => {
          this.$message.success("操作成功");
          form.resetFields();
          this.refreshData();
        });
    });
  }

  private refreshData() {
    this.templateService.getContractInfoByCaseId(this.caseIds[0]).subscribe(
          data => this.dataSet=data
        )
  }

  private onClickPreview(row) {
    this.dialog.preview = true;
    this.conTractContent = row.contractContent;
  }

  private onClickDownload(row) {
    const a = document.createElement("a");
    const attrDownload = document.createAttribute("download");
    attrDownload.value = row.id+".pdf";
    a.attributes.setNamedItem(attrDownload);
    a.href = row.url+"/"+row.id;
    a.click();
  }
}
</script>
<style lang="less">
.component.contract-formation {
  max-height: 533px;
  overflow-y: auto;
  .box-table {
    padding: 0;
  }
}
</style>